<template>
  <div id="main"></div>
  <div class="echarts">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="疫苗信息" name="first">
        <!-- 柱状图 -->
        <div ref="barChart" class="zzt"></div>
      </el-tab-pane>
      <el-tab-pane label="感染流感人数" name="second">
        <div id="second"></div>
      </el-tab-pane>
      <el-tab-pane label="物资统计" name="third">
        <div ref="myChartThree" style="width: 600px; height: 300px;"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { itemOne, itemThree } from '../../api/echart'
import { allHpv, hoursHpv, sevenHpv, fiveHpv, numberH } from "../../api/echart";

export default {
  name: "EchartsDemo",
  data() {
    return {
      colors: [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#37A2DA',
        '#32C5E9',
        '#67E0E3',
        '#9FE6B8',
        '#FFDB5C',
        '#ff9f7f',
        '#fb7293',
        '#E062AE',
        '#E690D1',
        '#e7bcf3',
        '#9d96f5',
        '#8378EA',
        '#96BFFF'
      ],
      // 各服务站接受患者数量
      arr: [],
      // 感染流感人数
      num: [],
      // 物资统计
      wuzi:[],
    };
  },

  async mounted() {
    const nums = await Promise.all([
      allHpv().then((res) => res?.list?.length ?? 0),
      hoursHpv().then((res) => res?.list?.length ?? 0),
      sevenHpv().then((res) => res?.list?.length ?? 0),
      fiveHpv().then((res) => res?.list?.length ?? 0),
    ]);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.barChart);
    // 绘制图表
    myChart.setOption({
      // 标题
      title: {
        text: "可约HPV信息",
      },
      // 提示工具
      tooltip: {
        formatter: "{a}<br>日期: {b}<br>可接种数量: {c}",
      },
      // x 坐标轴配置
      xAxis: {
        type: "category",
        data: ["全部", "24时可约", "7天可约", "15天可约"],
      },
      // y 坐标轴配置
      yAxis: {},
      // 序列
      series: [
        {
          name: "疫苗数量",
          type: "bar", // 图表类型
          // data: [num, "14", "14"], // 柱状图数据
          data: nums,
          barWidth: 60, // 柱条宽度
        },
        {
          name: "疫苗数量",
          type: "line",
          data: nums, // 数据
        },
      ],
      textStyle: {
        color: "black",
        fontWeight: "bold",
        fontSize: "145px",
      },
    })
  },

  async beforeMount() {
    // 服务站接收患者数据
    const result = await numberH()
      .then(res => {
        this.arr = res.list
        console.log(this.arr)
      })

    // 感染人数
    const se = await itemOne()
      .then((res) => {
        console.log('感染流感人数', res)
        this.num = [...res]
      })

    // 物资统计
    const wz = await itemThree()
      .then((res) => {
        this.wuzi = [...res]
      })


    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
      title: {
        text: '各服务站接收患者数据'
      },
      tooltip: {},
      xAxis: {
        data: this.arr.map(item => item.address),
      },
      yAxis: {},
      series: [
        {
          name: '人数',
          // 图的样式   bar：柱状图  pie：饼图
          type: 'bar',
          data: this.arr.map(item => item.pri),
          // 饼图的数据：data: this.arr.map(item => ({ value: item.pri, name: item.hospital })),
          itemStyle: {
            color: params => this.colors[params.dataIndex] || '#fac858',
          }
        }
      ]
    });


    var myChartTwo = echarts.init(document.getElementById('second'));
    myChartTwo.setOption({
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'item',
          label: {
            backgroundColor: '#e6b600'
          }
        }
      },
      title: {
        text: '感染流感人数(单位:人次)'
      },
      tooltip: {},
      xAxis: {
        data: this.num.map(item => item.title),
      },
      yAxis: {},
      series: [
        {
          name: '人数',
          // 图的样式   bar：柱状图  pie：饼图
          type: 'bar',
          data: this.num.map(item => item.num),
          // 饼图的数据：data: this.arr.map(item => ({ value: item.pri, name: item.hospital })),
          itemStyle: {
            color: params => this.colors[params.dataIndex] || '#fac858',
          }
        }
      ]
    })

    let myChartThree = echarts.init(this.$refs.myChartThree);
    myChartThree.setOption({
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'item',
          label: {
            backgroundColor: '#e6b600'
          }
        }
      },
      title: {
        text: '物资统计(单位:份)'
      },
      tooltip: {},
      xAxis: {
        data: this.wuzi.map(item => item.name),
      },
      yAxis: {},
      series: [
        {
          name: '人数',
          // 图的样式   bar：柱状图  pie：饼图
          type: 'bar',
          data: this.wuzi.map(item => item.value),
          // 饼图的数据：data: this.arr.map(item => ({ value: item.pri, name: item.hospital })),
          itemStyle: {
            color: params => this.colors[params.dataIndex] || '#fac858',
          }
        }
      ]
    })

  },
}

</script>

<style lang="less" scoped>
html,
body {
  height: 100%;
  width: 100%;
}

.text {
  font-size: 20px;
  margin-bottom: 50px;
}

.zzt {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
}

:deep(.el-tabs__item) {
  font-size: 22px;
}

#main {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
}

#second {
  width: 1000px;
  height: 500px;
  margin: 0 auto;
}
</style>
